<!-- eslint-disable vue/require-v-for-key -->
<template>
  <p class="detail">
    <el-card class="box-card">
      <div slot="header" class="header">
        <i>
          <img :src="detailObj.companyLogo?detailObj.companyLogo:require('@/assets/images/import/jrcp01.png')" alt>
          {{ detailObj.productName }}
        </i>
        <el-tag
          size="small"
          :class="['Inspan', detailObj.proStatus == 1 ? 'serious' : detailObj.proStatus == 2 ? 'unknow' : 'simple']"
        >{{ detailObj.proStatus == 1 ? '异常' : detailObj.proStatus == 2 ? '未知' : '正常' }}</el-tag>
      </div>
      <el-row class="ctop">
        <el-col :span="6" class="col-title">当天接入量:</el-col>
        <el-col :span="6" class="col-con">
          <el-popover style="margin-bottom: 10px" placement="top-start" width="200" trigger="hover">
            <div>当天接入数据（条）：{{ transWord(detailObj.dayAccessNum) }}</div>
            <span slot="reference" class="blue-word">
              {{
                detailObj.dayAccessNum * 1 > 999999 ? '999999+' : detailObj.dayAccessNum
              }}
            </span>
          </el-popover>
        </el-col>
        <el-col :span="6" class="col-title">累计接入量：</el-col>
        <el-col :span="6" class="col-con">{{ detailObj.totalAccessNum }}</el-col>
        <el-col :span="6" class="col-title">最后接入时间：</el-col>
        <el-col :span="18" class="col-con">
          {{
            detailObj.lastAccessTime ? moment(detailObj.lastAccessTime * 1).format('YYYY-MM-DD HH:mm:ss') : '—'
          }}
        </el-col>
        <el-col :span="6" class="col-title">接入方式：</el-col>
        <el-col :span="18" class="col-con">
          <div v-if="detailObj.accessTypeVoList.length">
            <template v-for="(i, idx) in detailObj.accessTypeVoList">
              {{ i.typeName }}
              <span class="blue-word">({{ i.typeNum }})</span>
              <span v-if="detailObj.accessTypeVoList.length > idx + 1">、</span>
            </template>
          </div>
          <template v-else>—</template>
        </el-col>
        <el-col :span="6" class="col-title">入库类型：</el-col>
        <el-col :span="18" class="col-con">
          <div v-if="detailObj.enterDatabaseTypeVoList.length">
            <template v-for="(i, idx) in detailObj.enterDatabaseTypeVoList">
              {{ i.enterTypeName }}
              <span class="blue-word">({{ i.enterTypeNum }})</span>
              <span v-if="detailObj.enterDatabaseTypeVoList.length > idx + 1">、</span>
            </template>
          </div>
          <template v-else>—</template>
        </el-col>
        <el-col :span="6" class="col-title">接入规则：</el-col>
        <el-col :span="6" class="col-con blue-word">
          <span style="cursor: pointer" @click="goRule(detailObj)">{{ detailObj.rulesNum }}</span>
        </el-col>
        <el-col :span="6" class="col-title">接入任务：</el-col>
        <el-col :span="6" class="col-con blue-word">
          <span
            style="cursor: pointer"
            @click="$router.push({ path:prefix+'/mlk/task/taskList', query: { name: 'mlkHome' } })"
          >{{ detailObj.taskNum }}</span>
        </el-col>
        <el-col :span="6" class="col-title">接入作业：</el-col>
        <el-col :span="5" class="col-con">启用：{{ detailObj.jobEnableNum }}</el-col>
        <el-col :span="5" class="col-con border">未启用：{{ detailObj.jobNotEnableNum }}</el-col>
        <el-col :span="8" class="col-con">
          解析异常次数：
          {{ detailObj.exceptionsNum || '—' }}
        </el-col>
      </el-row>
      <div class="cbottom">
        <template v-if="detailObj.accessJobVoList.length">
          <div class="btn">
            <div class="btn-arrow">
              <i v-show="currentPage!=1" class="el-icon-arrow-left" @click="handlePre" />
            </div>
            <div ref="btnNumRef" class="btn-num">
              <div
                v-for="(item, index) in accessJobVoList"
                :key="index"
                :class="[jobIndex == index ? 'active' : '', 'lis', item.parseExceptionNum > 0 ? 'red' : 'normal']"
                @click="changeJob(item, index)"
              >{{ startIndex+index }}</div>
            </div>

            <div class="btn-arrow">
              <i v-show="currentPage!=pages" class="el-icon-arrow-right" @click="handleNext" />
            </div>
          </div>
          <!-- <div class="btn"  v-else>
            <div class="lis normal active">无</div>
          </div>-->
          <el-row>
            <el-col :span="8" class="col-title">作业名称：</el-col>
            <el-col :span="16" class="col-con">{{ jobObj.jobName }}</el-col>
            <el-col :span="8" class="col-title">状态：</el-col>
            <el-col :span="16" class="col-con">
              {{
                !jobObj.runState && jobObj.runState != 0 ? '—' : jobObj.runState == 1 ? '未开启' : '开启'
              }}
            </el-col>
            <el-col :span="8" class="col-title">接入频次：</el-col>
            <el-col :span="16" class="col-con">{{ jobObj.accessFrequency }}</el-col>
            <el-col :span="8" class="col-title">接入方式：</el-col>
            <el-col
              :span="16"
              class="col-con"
            >
              <!-- {{ (jobObj.accessType ||jobObj.accessType ==0)?accessTypeArr[jobObj.accessType]:'—' }} -->
              <div v-if="jobObj.accessType && jobObj.accessType.length">
                <template v-for="(i, idx) in jobObj.accessType">
                  {{ i.typeName }}
                  <span class="blue-word">({{ i.typeNum }})</span>
                  <span v-if="jobObj.accessType.length > idx + 1">、</span>
                </template>
              </div>
              <template v-else>—</template>
            </el-col>
            <el-col :span="8" class="col-title">最后执行时间：</el-col>
            <el-col :span="16" class="col-con">
              {{
                jobObj.lastRunTime ? moment(jobObj.lastRunTime * 1).format('YYYY-MM-DD HH:mm:ss') : ''
              }}
            </el-col>
            <el-col :span="8" class="col-title">解析异常次数：</el-col>
            <el-col :span="16" class="col-con">
              <span
                style="cursor: pointer"
                @click="$router.push({ path: prefix+'/mlk/task/errorAlarm', query: { id: detailObj.proTypeId } })"
              >{{ jobObj.parseExceptionNum }}</span>
            </el-col>
          </el-row>
        </template>
        <el-empty v-else description="暂无数据" />
      </div>
    </el-card>
  </p>
</template>

<script>
export default {
  props: {
    detailObj: {
      type: Object,
      default: () => {
        return {
          accessTypeVoList: [],
          enterDatabaseTypeVoList: [],
          accessJobVoList: []
        }
      }
    }
  },
  data() {
    return {
      prefix: window.prefix,
      // 存储任务列表
      jobObj: {},
      // 选中的任务
      jobIndex: 0,
      // 接入方式
      accessTypeArr: ['全部产品', '已接入过数据 ', '近一周接入数据', '近一周接入数据'],
      pages: 1,
      currentPage: 1,
      accessJobVoList: [],
      allAccessJobVoList: [],
      startIndex: 1
    }
  },
  mounted() {
    if (this.detailObj.accessJobVoList.length > 0) {
      this.jobObj = this.detailObj.accessJobVoList[0]
      this.allAccessJobVoList = this.detailObj.accessJobVoList
      this.accessJobVoList = this.allAccessJobVoList.slice(0, 10)
      this.pages = Math.ceil(this.detailObj.accessJobVoList.length / 10)
    }
  },
  methods: {
    // 点击任务事件
    changeJob(item, index) {
      this.jobObj = item
      this.jobIndex = index
    },
    // 转化文本格式
    transWord(number) {
      const str = number?.toString()

      // 数字
      const num = str?.replace(/(\d)(?=(?:\d{3})+$)/g, '$1,')
      // 汉字
      const cnh = this.tranCnh(number)

      return `${num}【${cnh}】`
    },
    // 转为汉字
    tranCnh(num) {
      // eslint-disable-next-line no-array-constructor
      const arr1 = new Array('零', '一', '二', '三', '四', '五', '六', '七', '八', '九')

      // eslint-disable-next-line no-array-constructor
      const arr2 = new Array(
        '',
        '十',
        '百',
        '千',
        '万',
        '十',
        '百',
        '千',
        '亿',
        '十',
        '百',
        '千',
        '万',
        '十',
        '百',
        '千',
        '亿'
      ) // 可继续追加更高位转换值

      if (!num || isNaN(num)) {
        return '零'
      }

      const english = num?.toString()?.split('')

      let result = ''

      for (let i = 0; i < english.length; i++) {
        const des_i = english.length - 1 - i // 倒序排列设值

        result = arr2[i] + result

        const arr1_index = english[des_i]

        result = arr1[arr1_index] + result
      }

      // 将【零千、零百】换成【零】 【十零】换成【十】

      result = result.replace(/零(千|百|十)/g, '零').replace(/十零/g, '十')

      // 合并中间多个零为一个零

      result = result.replace(/零+/g, '零')

      // 将【零亿】换成【亿】【零万】换成【万】

      result = result.replace(/零亿/g, '亿').replace(/零万/g, '万')

      // 将【亿万】换成【亿】

      result = result.replace(/亿万/g, '亿')

      // 移除末尾的零

      result = result.replace(/零+$/, '')

      // 将【零一十】换成【零十】

      // result = result.replace(/零一十/g, '零十');

      // 貌似正规读法是零一十

      // 将【一十】换成【十】

      result = result.replace(/^一十/g, '十')

      return result
    },
    // 跳转接入规则
    goRule(i) {
      this.$router.push({ path: window.prefix + '/mlk/access/rule', query: { id: i.proTypeId }})
    },
    //  上一页
    handlePre() {
      this.currentPage -= 1
      if (this.currentPage == 1) {
        this.startIndex = 1
        this.accessJobVoList = this.allAccessJobVoList.slice((this.currentPage - 1) * 10, 10 * (this.currentPage))
      } else {
        this.startIndex = 1 + (this.currentPage - 1) * 10
        this.accessJobVoList = this.allAccessJobVoList.slice(1 + (this.currentPage - 1) * 10, 10 * (this.currentPage))
      }
      this.jobIndex = 0
      this.jobObj = this.accessJobVoList[0]
    },
    //  下一页
    handleNext() {
      this.currentPage += 1
      this.startIndex = 1 + (this.currentPage - 1) * 10
      this.accessJobVoList = this.allAccessJobVoList.slice(1 + (this.currentPage - 1) * 10, 10 * (this.currentPage))
      this.jobIndex = 0
      this.jobObj = this.accessJobVoList[0]
    }
  }
}
</script>

<style lang="scss" scoped>
.detail {
  font-size: 12px;
  margin: 0;
  letter-spacing: 1px;
  .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    img {
      width: 40px;
      height:40px;
      margin-right: 10px;
      vertical-align: middle;
    }
    i {
      font-size: 16px;
      font-weight: 700;
      font-style: normal;
    }
  }
  .col-title {
    text-align: left;
  }
  .col-con {
    color: #8c8c8c;
  }
  .ctop {
    display: flex;
    flex-wrap: wrap;
    padding: 15px 20px 20px;
    font-size: 12px;

    border-bottom: 1px solid #e5e5e5;
    position: relative;
    .border {
      &::after {
        content: '';
        display: inline-block;
        vertical-align: top;
        width: 1px;
        height: 14px;
        margin-left: 15px;
        transform: translateY(-1px);
        background: #e5e5e5;
      }
    }
  }
  .cbottom {
    padding: 20px;
    background: #f9fafd;
    .btn {
      display: flex;
      width: 100%;
      margin-bottom: 10px;
      align-items: center;
    .btn-arrow{
      text-align: center;
        line-height: 30px;
        width: 30px;
        height: 30px;
        flex-shrink: 0;
        border-radius: 4px;
       i{
        cursor: pointer;
       }
    }
      .btn-num{
        display:flex;
        width:calc(100% - 60px);
        overflow:hidden;
      }
      .lis {
        margin-right: 13px;
        text-align: center;
        line-height: 30px;
        width: 30px;
        height: 30px;
        flex-shrink: 0;
        border-radius: 4px;
        cursor: pointer;
        &.normal {
          border: 1px solid rgba(0, 0, 0, 0.08);
          &.active {
            color: #4b6eef;
            background: rgba(75, 110, 239, 0.05);
            border: 1px solid rgba(75, 110, 239, 1);
          }
        }

        &.red {
          border: 1px solid rgba(255, 163, 158, 0.6);
          background: #fff;
          color: rgb(250, 154, 149);
          &.active {
            color: #ff3535;
            background: #fff1f0;
            border: 1px solid rgba(255, 163, 158, 1);
          }
        }
      }
    }
  }
  .el-col {
    margin-top: 5px;
    height: 16px;
  }
}

::v-deep {
  .el-empty {
    flex: 1;
    padding: 0;
    .el-empty__image {
      width: 120px;
    }
  }
  .el-card__header {
    padding: 20px;
  }
  .el-card__body {
    padding: 0;
  }
}
.blue-word {
  color: #4b6eef !important;
}
</style>
